<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>具名插槽</title>
</head>
<body>


<div id="app">
  <base-layout>
    <template #header>
      <h1>Here might be a page title</h1>
    </template>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <template #footer>
      <p>Here's some contact info</p>
    </template>
  </base-layout>
</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('base-layout', {
    template: `
      <div class="container">
        <header>
          <slot name="header"></slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
    `
  })

  let vm = new Vue({
    el: '#app',
  })
</script>

</body>
</html>